<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>修改礼物</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <link rel="stylesheet" href="css/jquery-weui.css">
    <link rel="stylesheet" href="css/style.css">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>

    <link rel="stylesheet" href="css/weui.css" />
    <link rel="stylesheet" href="css/weuix.css" />
    <script src="js/zepto.min.js"></script>

    <!-- vue -->
    <script src="js/vue.js"></script>
</head>

<body>
    <div class="page-hd">
        <h1 class="page-hd-title">
            修改礼物
        </h1>
    </div>
    <div class="weui-panel weui-panel_access" id="addGift">
        <div class="weui-panel__bd">
            <div class="weui_cells weui_cells_form">
                <label class="weui-cell weui-cell_active">
                <div class="weui-cell__hd"><span class="weui-label">名称</span></div>
                <div class="weui-cell__bd">
                    <input id="js_input_name" class="weui-input" placeholder="填写礼物名称" v-model="giftName">
                </div>
            </label>
                <label class="weui-cell weui-cell_active">
                <div class="weui-cell__hd"><span class="weui-label">描述</span></div>
                <div class="weui-cell__bd">
                    <input id="js_input_info" class="weui-input" placeholder="填写礼物描述" v-model="giftInfo">
                </div>
            </label>
                <label class="weui-cell weui-cell_active">
                <div class="weui-cell__hd"><span class="weui-label">数量</span></div>
                <div class="weui-cell__bd">
                    <input id="js_input_num" class="weui-input" placeholder="填写礼物数量" v-model="giftNum">
                </div>
            </label>
                <label class="weui-cell weui-cell_active">
                <div class="weui-uploader">
                    <div class="weui-uploader__hd">
                        <p class="weui-uploader__title">礼物图片</p>
                    </div>
                    <div class="weui-uploader__bd">
                        <ul class="weui-uploader__files">
                            <li v-for="img in imgs" class="weui-uploader__file" role="img" tabindex="0" :style='{backgroundImage:"url("+img+")"}'></li>
                        </ul>
                        <div class="weui-uploader__input-box" v-if="oldImg.length==0">
                            <input class="weui-uploader__input" accept="image/*" multiple="" type="file"
                                   @change="previewImages($event)">
                        </div>
                    </div>
                </div>
            </label>
                <div class="weui-cell">
                    <div class="weui-cell__hd"><label class="weui-label">礼物开抢时间</label></div>
                    <div class="weui-cell__bd">
                        <input type="text" class="weui-input" id='startTime' placeholder="请选择礼物开抢时间" v-model="startTime" />
                    </div>
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__hd"><label class="weui-label">开抢截止时间</label></div>
                    <div class="weui-cell__bd">
                        <input type="text" class="weui-input" id='endTime' placeholder="请选择开抢截止时间" v-model="endTime" />
                    </div>
                </div>
            </div>
            <button class="weui-btn weui-btn_primary" style="width: 200px" @click="upload">提交</button>
            <button class="weui-btn weui-btn_warn" style="width: 200px" onclick="deleteGift()">删除礼物</button>
        </div>
    </div>


    <script src="js/jquery.min.js"></script>
    <script src="js/jquery-weui.min.js"></script>
    <script src="js/fastclick.js"></script>
    <script>
        function deleteGift() {
            let giftId = getQueryVariable("ID")
            alert(giftId)
            $.ajax({
                type: 'post',
                url: 'http://139.224.246.43:8082/giftapi/deleteById/',
                contentType: 'application/json; charset=utf-8',
                data: JSON.stringify({
                    "id": giftId,
                }),
                success: function(data) {
                    alert("删除礼物成功！")
                    console.log(data)
                },
                error: function(error) {
                    alert("删除礼物出错！")
                    console.log(error)
                }
            })
        }

        function getQueryVariable(variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable) {
                    return pair[1];
                }
            }
            return (false);
        }

        var app = new Vue({
            el: '#addGift',
            data: {
                giftName: '',
                id: "",
                giftInfo: '',
                giftNum: '',
                imgs: [],
                startTime: '',
                endTime: '',
                imgData: '',
                oldImg: ''
            },
            beforeMount() {
                let giftId = getQueryVariable("ID")
                let ID = parseInt(giftId);
                $.ajax({
                    type: 'post',
                    url: '/giftapi/queryById',
                    contentType: 'application/json',
                    dataType: 'json',
                    data: JSON.stringify({
                        "id": ID,
                    }),
                    success: function(data) {
                        console.log(data)
                        console.log(app.$data)
                        app.$data.giftName = data.name
                        app.$data.giftInfo = data.info
                        app.$data.giftNum = data.num
                        app.$data.imgs.push(data.img)
                    },
                    error: function(error) {
                        console.log(error)
                    }
                });
            },
            methods: {
                upload() {
                    console.log(this.$data)
                    var startTimebefore = this.$data.startTime
                    var endTimebefore = this.$data.endTime
                    var startTime = "" + startTimebefore[0] + "-" + startTimebefore[1] + "-" + startTimebefore[2] + " " + startTimebefore[3] + ":" + startTimebefore[4] + ":00"
                    var endTime = "" + endTimebefore[0] + "-" + endTimebefore[1] + "-" + endTimebefore[2] + " " + endTimebefore[3] + ":" + endTimebefore[4] + ":00"
                    let giftId = getQueryVariable("ID")
                    $.ajax({
                        type: 'post',
                        url: 'http://139.224.246.43:8082/giftapi/edit/',
                        contentType: 'application/json; charset=utf-8',
                        data: JSON.stringify({
                            "base64Photo": this.imgData,
                            "endTime": endTime,
                            "startTime": startTime,
                            "gift": {
                                "id": giftId,
                                "img": this.imgs[0],
                                "info": this.giftInfo,
                                "name": this.giftName,
                                "num": this.giftNum,
                                "endTime": "",
                                "startTime": "",
                            }
                        }),
                        success: function(data) {
                            alert("更新礼物信息成功！")
                            console.log(data)
                        },
                        error: function(error) {
                            alert("更新礼物信息出错！")
                            console.log(error)
                        }
                    });
                },
                previewImages(e) {
                    var src, url = window.URL || window.webkitURL || window.mozURL,
                        files = e.target.files;
                    for (var i = 0, len = files.length; i < len; ++i) {
                        var file = files[i];
                        var reader = new FileReader();
                        let that = this
                        reader.onload = function(evt) {
                            that.imgData = evt.target.result
                        };
                        reader.readAsDataURL(file)

                        if (url) {
                            src = url.createObjectURL(file);
                        } else {
                            src = e.target.result;
                        }
                        this.imgs = []
                        this.imgs.push(src)
                    }
                }
            }
        })

        $("#startTime").datetimePicker({
            title: '出发时间',
            min: "2021-1-12",
            max: "2022-12-12 12:12",
            onChange: function(picker, values, displayValues) {
                console.log(values);
                app.startTime = values
            }
        });

        $("#endTime").datetimePicker({
            title: '出发时间',
            min: "2021-1-12",
            max: "2022-12-12 12:12",
            onChange: function(picker, values, displayValues) {
                app.endTime = values
            }
        });
    </script>

</body>

</html>